<template>
  <div>
<van-nav-bar
  title="发布房源"
  left-arrow
  @click-left="$router.push('/register')"
/>
 <van-form @submit="onSubmit">
  <div class="header">房源信息</div>
      <div class="body">
        <van-field v-model="areaName" label="小区名称" placeholder="请输入小区名称"  input-align="right" right-icon="arrow"  @click="$router.push('/rent/search')"/></van-field>
          <van-field
          v-model="price"
          name="租金"
          label="租金"
          placeholder="请输入租金/月"
        >
          <template #right-icon>
            <span class="price">￥/月</span>
          </template>
        </van-field>
        <van-field
          v-model="size"
          name="建筑面积"
          label="建筑面积"
          placeholder="请输入建筑面积"
        >
          <template #right-icon>
            <span class="size">m²</span>
          </template>
        </van-field>
        <van-field
          readonly
          :value="level"
          clickable
          name="户型"
          label="户型"
          placeholder="请选择"
          input-align="right"
          right-icon="arrow"
          @click="showNum = true"
        >
        </van-field>
        <van-field
          readonly
          clickable
          :value="apart"
          name="所在楼层"
          label="所在楼层"
          placeholder="请选择"
          input-align="right"
          right-icon="arrow"
          @click="showFloor = true"
        >
        </van-field>
        <van-field
          readonly
          clickable
          :value="aspect"
          name="朝向"
          label="朝向"
          placeholder="请选择"
          input-align="right"
          right-icon="arrow"
          @click="showTurn = true"
        >
        </van-field>
        <van-field
          class="title"
          :value="title"
          name="房屋标题"
          label="房屋标题"
          placeholder="请输入标题(例如：整租 小区名 2室 5000元)"
        >
        </van-field>
        <van-field class="image" name="房屋图像" label="房屋图像">
          <template #input>
            <van-uploader v-model="image" multiple upload-icon="plus" />
          </template>
        </van-field>
        <van-field class="sup" :value="sup" name="房屋配置" label="房屋配置">
          <template #input>
            <van-grid :column-num="5">
        <van-grid-item v-for="item in sup" :key="item" icon="photo-o" :text="item" />
        </van-grid>
          </template>
        </van-field>
        <van-field class="desc" name="房屋描述" label="房屋描述">
          <template #input>
            <textarea
              placeholder="请输入房屋描述信息"
              v-model="desc"
            ></textarea>
          </template>
        </van-field>
        <div>
          <van-button class="cancel" :block="false" type="default">取消</van-button>
        </div>
        <div>
          <van-button class="submit" :block="false" type="primary">提交</van-button>
        </div>
        <van-popup v-model="showNum" position="bottom">
          <van-picker
            show-toolbar
            :columns="num"
            @confirm="onNum"
            @cancel="showNum = false"
          />
        </van-popup>
        <van-popup v-model="showFloor" position="bottom">
          <van-picker
            show-toolbar
            :columns="floor"
            @confirm="onFloor"
            @cancel="showFloor = false"
          />
        </van-popup>
        <van-popup v-model="showTurn" position="bottom">
          <van-picker
            show-toolbar
            :columns="turn"
            @confirm="onTurn"
            @cancel="showTurn = false"
          />
        </van-popup>
     </div>
 </van-form>
   </div>
</template>

<script>
import { HousesParams } from "@/api/home"
export default {
  name:'rend-page',
  data () {
    return {
      housesList: [],
       columnFloor: '', //楼层
       columnNum:[], //几室
       columnTurn:[], //方位
      areaName: '',
      price: '',
      size: '',
      num:'',
      floor:'',
      turn:'',
      level: '',
      apart:'',
      aspect: '',
      showNum: false,
      // columnNum: ['一室', '二室', '三室', '四室', '四室+'],
      showFloor: false,
      // columnFloor: ['高楼层', '中楼层', '低楼层'],
      showTurn: false,
      // columnTurn: ['东', '西', '南', '北', '东南', '东北', '西南', '西北'],
      title: '',
      desc: '',
      image: [],
      sup: [],
      supper:[],

    }
  },
  async created() {
    const data = await HousesParams()
    console.log(data);
   this.housesList = data
    this.columnFloor = [...this.columnFloor, ...data.body.floor]
    this.columnNum = [...this.columnNum, ...data.body.roomType]
    this.columnTurn = [...this.columnTurn, ...data.body.oriented]
    this.supper = [...this.sup, ...data.body.supporting]
    console.log(this.supper);
    let sub = []
    this.supper.forEach(item => sub.push(item.label))
    this.sup = sub
    console.log(this.sup)
    let num = []
    this.columnNum.forEach(item => num.push(item.label))
    this.num =num
    console.log(this.num); //['一室', '二室', '三室', '四室', '四室+'],
    let floor = []
    this.columnFloor.forEach(item => floor.push(item.label))
    this.floor = floor
    console.log(floor); //['高楼层', '中楼层', '低楼层'],
    let turn = []
    this.columnTurn.forEach(item => turn.push(item.label))
    this.turn = turn
    console.log(this.turn);//['东', '西', '南', '北', '东南', '东北', '西南', '西北'],
  },
  methods: {
    onSubmit () {
    },
    onNum (value) {
      this.level = value
      this.showNum = false
    },
    onFloor (value) {
      this.apart = value
      this.showFloor = false
    },
    onTurn (value) {
      this.aspect = value
      this.showTurn = false
    }
  }
}
</script>

<style lang="less" scoped>
.add-page {
  background-color: #000;
}
.header {
  color: #21b97a;
  background-color: #fff;
  font-size: 15px;
  padding: 15px 15px 9px;
  width: 100%;
  box-sizing: border-box;
}
/deep/ .van-nav-bar {
  background-color: #21b97a;
  .van-icon {
    color: white;
  }
}
/deep/ .van-nav-bar__title {
  color: white;
  font-size: 18px;
}
/deep/ .van-field {
  position: relative;
  display: flex;
  padding-left: 15px;
  min-height: 44px;
  background-color: #fff;
  vertical-align: middle;
  overflow: hidden;
  transition: background-color 0.2s;
  align-items: center;
}
/deep/ .title,
/deep/ .image,
/deep/ .sup,
/deep/ .desc {
  display: block;
  .van-field__body {
    border-top: 1px solid rgba(136, 136, 136, 0.1);
    margin-top: 5px;
    padding-top: 5px;
  }
  textarea {
    width: 100%;
    height: 150px;
    border: none;
    margin-bottom: 60px;
    &::placeholder {
      color: rgba(136, 136, 136, 0.5);
    }
  }
}
/deep/ .van-cell::after {
  border-bottom: none;
}
/deep/ .van-grid-item:hover {
  color: #21b97a;
  .van-grid-item__text {
    color: #21b97a;
  }
}
.cancel {
  position: fixed;
  bottom: 0;
  left: 0;
  color: #21b97a;
  width: 50%;
}
.submit {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 50%
}
</style>